////////////////////////////////////////////////////////////////////////////////
// Custom Sass Mixins
// --------------------
// This file contains custom Sass mixins and functions. It will be included 
// in any files that import the "base" partial. To use a mixin from this 
// file, add this line to the top of your .scss file:
//   @import "base";
// Then to use a mixin for a particular rule, add this inside the ruleset's
// curly brackets:
//   @include mix-in-name;
////////////////////////////////////////////////////////////////////////////////

//
// Custom Functions
////////////////////////////////////////



//
// Custom Mixins
////////////////////////////////////////

// Hide element visually, but have it available for screenreaders.
@mixin element-invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
}

// Turns off the element-invisible effect.
@mixin element-invisible-off {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static !important;
  width: auto;
}

// Hide element visually, but have it available for screenreaders 
// and make it focusable
@mixin element-invisible-focusable {
  @include element-invisible;
  &:active,
  &:focus { // Allow the element to be focusable when navigated to via the keyboard: h5bp.com/p
    @include element-invisible-off;
  }
}

// Clearfix to contain floats: h5bp.com/q
@mixin my-clearfix {
  &:before { // prevent top margin colapse
    content: "";
    display: table;
  }
  @include pie-clearfix;
}

// Float element left with margins
@mixin my-float-left {
  @include float-left;
  margin: 0 10px 5px 0;
}

// Float element right with margins
@mixin my-float-right {
  @include float-right;
  margin: 0 0 5px 10px;
}
